// 定义 BookManager 组件
const BookManager = {
    name: 'BookManager',
    components: {
        BookForm, // 局部注册 BookForm 组件
        BookTable // 局部注册 BookTable 组件
    },
    template: `
<div>
  <h3>图书列表</h3>
   <button style="margin-bottom: 8px" @click="openForm(null)">添加图书</button>
  <BookTable 
    :books="books"
    @edit="openForm"
    @delete="handleDelete"
  />
 
  <BookForm
    v-model:visible="showForm"
    :book-data="currentBook"
    @submit="handleSubmit"
  />
</div>
    `,
    setup() {
        // 使用 Vue 的 ref 函数创建响应式数据
        const books = Vue.ref([])
        const showForm = Vue.ref(false)
        const currentBook = Vue.ref(null)

        // 组合式函数 - 数据获取
        const fetchData = () => {
            axiosInstance.get('/api/book/')
                .then(response => {
                    // 将获取到的数据赋值给 books
                    books.value = response.data;
                })
        }

        // 提交表单时的处理函数
        const handleSubmit = (formData) => {
            if (formData.id) {
                // 更新图书信息
                axiosInstance.put('/api/book/', formData)
                    .then(response => {
                        message.success('图书更新成功');
                        showForm.value = false
                        fetchData();
                    })
                    .catch(error => {
                        // 处理错误的处理
                        showForm.value = true
                    });
            } else {
                // 添加新图书
                axiosInstance.post(`/api/book/`, formData)
                    .then(response => {
                        message.success('图书添加成功');
                        showForm.value = false
                        fetchData();
                    })
                    .catch(error => {
                        //这里会捕获到拦截器抛出的 Error 对象
                        console.log(error.message)
                        showForm.value = true
                    });
            }
        }

        // 打开表单时的处理函数
        const openForm = (book) => {
            // 如果有 book 参数，则复制其属性到 currentBook
            currentBook.value = book ? {...book} : null
            // 显示表单
            showForm.value = true
        }

        // 删除图书的处理函数
        const handleDelete =  (id) => {
            if (confirm('确定删除吗？')) {
                // 发送删除请求
                axiosInstance.delete(`/api/book/${id}`)
                    .then(response => {
                        message.success('图书删除成功');
                        fetchData();
                    })
                    .catch(error => {
                        // 处理错误的处理
                        message.error('图书删除失败');
                    });
            }
        }

        // 在组件挂载时获取数据
        onMounted(() => {
                fetchData()
            }
        )
        // 返回创建的函数和数据，供模板使用
        return {books, showForm, currentBook, openForm, handleDelete, handleSubmit};
    }
};